import React, {Component} from 'react';
import {Button, Col, Form, Input, Row, Space, Table, Avatar, Image} from "antd";
import {DeleteOutlined, DownOutlined, PlusOutlined, SearchOutlined, UpOutlined} from "@ant-design/icons";
import {qryWxAccountList} from "../../api/weixinUms";
import {withRouter} from "react-router-dom";


class WeiXinUms extends Component {

    state = {
        expand: true
    };

    columns = [
        {
            title: '昵称',
            dataIndex: 'nickname',
        },
        {
            title: '头像',
            dataIndex: 'headimgurl',
            render: (text, record) => (

                <Avatar src={<Image
                    src="http://thirdwx.qlogo.cn/mmopen/6mXOeYa4HUiba743ib1VC6zKMkrOqnx1DiatIh4ibHL7ZNViaUOlDV3nZuIypySfnhmMt1Y204PTxicMLLzibWjo5rPHw/132"/>}>U</Avatar>
            ),

        },
        {
            title: '性别',
            dataIndex: 'sex',

        }, {
            title: '所在省份',
            dataIndex: 'province',

        }, {
            title: '标签',
            dataIndex: 'tagIdList',

        }, {
            title: '关注时间',
            dataIndex: 'subscribeTime',

        }, {
            title: '备注',
            dataIndex: 'remark',

        },

        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <a>编辑</a>
                    {/*<a>删除</a>*/}
                </Space>
            ),
        },
    ];

    getData = () => {
// noinspection JSAnnotator
        const data = [];
        qryWxAccountList().then((response) => {
            console.log(response);
            let rows = response.data.rows;
            data.concat(rows);
        });
        console.log(data);
        return data;
    };


    onChange = (pagination, filters, sorter, extra) => {
        console.log('params', pagination, filters, sorter, extra);
    };

    render() {
        return (
            <div>

                <div>
                    <Form
                        name="advanced_search"
                        className="ant-advanced-search-form"
                        onFinish={this.onFinish}>
                        <Row>
                            <Col span={4} style={{textAlign: 'right'}}>
                                <Button type="primary" htmlType="add" icon={<PlusOutlined/>}>
                                    添加
                                </Button>
                                <Button type="primary" style={{margin: '0 8px'}} icon={<DeleteOutlined/>}>
                                    删除
                                </Button>

                            </Col>

                            <Col span={20}>
                                <Row>
                                    <Col>
                                        <Form.Item>

                                            <Input placeholder="请输入查询名称"/>
                                        </Form.Item>
                                    </Col>
                                    <Col>
                                        <Form.Item>

                                            <Input placeholder="请输入标题"/>
                                        </Form.Item>
                                    </Col>
                                    <Col>
                                        <Form.Item>

                                            <Input placeholder="请输入作者名称"/>
                                        </Form.Item>
                                    </Col>
                                    <Col>
                                        <Button style={{margin: '0 8px'}} type="primary" icon={<SearchOutlined/>}>
                                            查询
                                        </Button>
                                        <a
                                            style={{fontSize: 12}}
                                        >
                                            {this.state.expand ? <UpOutlined/> : <DownOutlined/>} 更多...
                                        </a>
                                    </Col>


                                </Row>

                            </Col>

                        </Row>


                    </Form>


                </div>


                <Table columns={this.columns} dataSource={this.getData()} onChange={this.onChange}></Table>

            </div>
        );
    }
}

export default withRouter(WeiXinUms);
